<template>
    <div>
    <el-select class="g-width100"
               ref="elSelect"
               v-model="localValue"
               no-data-text="您未配置可用考勤组"
    >
        <template v-if="selectData">
        <el-option-group

                v-for="(groupItem,groupItemIndex) in selectData"
                :key="groupItemIndex"
                :label="groupItem.group.name">
            <el-option
                    v-for="(item,index) in groupItem.classes"
                    :label="[item.name,'(',item.startTime,'-',item.endTime,')'].join('')"
                    :value="groupItem.group.id + '-' + item.id"
                    :key="index"
            ></el-option>
        </el-option-group>
        </template>
    </el-select>
        <div class="g-margin-top30">
            <span>班次日期：</span>
            <el-switch
                    v-model="isClasseToday"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="今日"
                    inactive-text="昨日"
                    v-on:change="switchChange"
            >
            </el-switch>
        </div>

    <el-alert class="g-margin-top30"
            :title="['当前选择的班次：',selectedClasse.group.name,' ',selectedClasse.classe.name,'(',selectedClasse.classe.startTime,'-',selectedClasse.classe.endTime,')'].join('')"
            type="warning">
    </el-alert>
        <el-alert class="g-margin-top30"
                  :title="['当前班次的打卡规则：',selectedClasse.classe.clockName ? selectedClasse.classe.clockName : selectedClasse.group.clockName].join('')"
                  type="warning">
        </el-alert>
    <el-timeline class="g-margin-top30">
        <el-timeline-item
                size="large"
                :timestamp="['上班时间：',selectedClasse.classe.startTime].join('')"
                placement="top"
        >
            <div class="g-margin-top30" v-if="selectedClasseClock.userClock && selectedClasseClock.userClock.onClockAt">
                打卡方式：{{selectedClasseClock.userClock.onClockTypeDictName}}
                <br/>
                打卡时间：{{selectedClasseClock.userClock.onClockAtTxt}}
                <el-tag v-if="selectedClasseClock.userClock.isOnClockLate" type="danger">迟到{{selectedClasseClock.userClock.onClockLateTime}}分钟</el-tag>
                <el-tag v-else type="success">正常</el-tag>
            </div>
            <div class="g-margin-top30"><el-button type="primary" @click="onClock" :disabled="(selectedClasseClock.userClock && !!selectedClasseClock.userClock.onClockAt) || !selectedClasseClock.isAllowOnClock" :loading="onClockLoading">上班打卡</el-button></div>
        </el-timeline-item>

        <el-timeline-item
                size="large"
                :timestamp="['下班时间：',selectedClasse.classe.endTime].join('')"
                placement="top"
        >
            <div class="g-margin-top30" v-if="selectedClasseClock.userClock && selectedClasseClock.userClock.offClockAt">
                打卡方式：{{selectedClasseClock.userClock.offClockTypeDictName}}
                <br/>
                打卡时间：{{selectedClasseClock.userClock.offClockAtTxt}}
                <el-tag v-if="selectedClasseClock.userClock.isOffClockLeaveEarly" type="danger">早退{{selectedClasseClock.userClock.offClockLeaveEarlyTime}}分钟</el-tag>
                <el-tag v-else type="success">正常</el-tag>
            </div>
            <div class="g-margin-top30"><el-button type="primary" @click="offClock" :disabled="!selectedClasseClock.isAllowOffClock" :loading="offClockLoading">下班打卡</el-button></div>
        </el-timeline-item>
    </el-timeline>
    </div>
</template>

<script>
    export default {
        components:{
        },
        data(){
            return {
                localValue: null,
                selectData: null,
                groupAndClasse: null,
                onClockLoading: false,
                offClockLoading: false,
                isClasseYestoday: false,
                isClasseToday: true
            }
        },
        computed: {
            selectedClasse(){
                let r = {
                    group: {},
                    classe: {}
                }
                if(this.localValue){
                    let localValueArray = this.localValue.split('-')
                    let groupId = localValueArray[0]
                    let classeId = localValueArray[1]
                    for (let i = 0; i < this.selectData.length; i++) {
                        let item = this.selectData[i]
                        if(item.group.id == groupId){
                            for (let j = 0; j < item.classes.length; j++) {
                                let cItem = item.classes[j]
                                if(cItem.id == classeId){
                                    r.group = item.group
                                    r.classe = cItem
                                    return r
                                }
                            }
                        }

                    }
                }
                return r
            },
            selectedClasseClock(){
                let r = {
                    group: {},
                    classe: {},
                    userClock: {},
                    isAllowOnClock: false,
                    isAllowOffClock: false
                }
                if(this.localValue){
                    let localValueArray = this.localValue.split('-')
                    let groupId = localValueArray[0]
                    let classeId = localValueArray[1]
                    for (let i = 0; i < this.groupAndClasse.length; i++) {
                        let item = this.groupAndClasse[i]
                        if(item.group.id == groupId && item.classe.id == classeId){
                            r.group = item.group
                            r.classe = item.classe
                            r.userClock = item.userClock||{}
                            r.isAllowOnClock = item.isAllowOnClock
                            r.isAllowOffClock = item.isAllowOffClock
                            return r
                        }
                    }
                }
                return r
            }
        },
        mounted() {
            this.initSelectData()
            this.initGroupAndClasse()
        },
        methods:{
            initSelectData(){
                this.axios.get(this.$baseURL.attend +  '/attend/groupclasserel/groupAndClassesList').then(res => {
                    this.selectData = res.data
                    this.$nextTick(()=>{
                        this.$refs.elSelect.setSelected()
                    })
                })
            },
            initGroupAndClasse(){
                this.axios.get(this.$baseURL.attend +  '/attend/groupclasserel/groupAndClasseList',{params:{isClasseYestoday:this.isClasseYestoday}}).then(res => {
                    this.groupAndClasse = res.data
                    if(!this.localValue){

                        // 默认选中第一个未打卡的
                        for(let i = 0;i < this.groupAndClasse.length; i++){
                            let item = this.groupAndClasse[i]
                            if(!item.userClock){
                                this.localValue = item.group.id + '-' + item.classe.id
                                break;
                            }
                        }
                        if(!this.localValue){
                            this.localValue = this.groupAndClasse[0].group.id + '-' + this.groupAndClasse[0].classe.id
                        }
                        this.$nextTick(()=>{
                            this.$refs.elSelect.setSelected()
                        })
                    }

                })
            },
            switchChange(isClasseToday) {
                this.isClasseYestoday = !isClasseToday
                this.initGroupAndClasse()
            },
            // 上班打卡
            onClock(){
                if(!this.localValue){
                    this.$message.error('请选择打卡的班次')
                    return
                }
                let localValueArray = this.localValue.split('-')
                let groupId = localValueArray[0]
                let classeId = localValueArray[1]
                this.onClockLoading = true
                this.axios.post(this.$baseURL.attend +  '/attend/userclock/onClock',{
                    groupId: groupId,
                    classeId: classeId,
                    isClasseYestoday:this.isClasseYestoday,
                    onClockTypeDictCode: 'user_clock_type_pc',
                    onClockTypeInfo: 'pc'
                }).then(res => {
                    this.$message.success('打卡成功')
                    this.initGroupAndClasse()
                }).catch(error=>{
                    if(error.response){
                        this.$message.error(error.response.data.msg)
                    }else{
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.onClockLoading = false
                })
            },
            // 下班打卡
            offClock(){
                if(!this.localValue){
                    this.$message.error('请选择打卡的班次')
                    return
                }
                let localValueArray = this.localValue.split('-')
                let groupId = localValueArray[0]
                let classeId = localValueArray[1]
                this.offClockLoading = true
                this.axios.post(this.$baseURL.attend +  '/attend/userclock/offClock',{
                    groupId: groupId,
                    classeId: classeId,
                    isClasseYestoday:this.isClasseYestoday,
                    offClockTypeDictCode: 'user_clock_type_pc',
                    offClockTypeInfo: 'pc'
                }).then(res => {
                    this.$message.success('打卡成功')
                    this.initGroupAndClasse()
                }).catch(error=>{
                    if(error.response){
                        this.$message.error(error.response.data.msg)
                    }else{
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.offClockLoading = false
                })
            }
        }
    }
</script>

<style scoped>

</style>